<!doctype html>
<html lang="zh">
<head>
  <meta charset="UTF-8">
  <meta
      content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"
      name="viewport">
  <meta content="ie=edge" http-equiv="X-UA-Compatible">
  <title>zk-view</title>
  <script src="https://cdn.jsdelivr.net/npm/vue"></script>
  <!-- 引入样式 -->
  <link href="https://unpkg.com/element-ui/lib/theme-chalk/index.css" rel="stylesheet">
  <!-- 引入组件库 -->
  <script src="https://unpkg.com/element-ui/lib/index.js"></script>
  <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head>
<body>
<div id="app">

  <div>

    <el-container>
      <el-header>
        <span>JVM总内存: {{pro_info.totalMem}}</span>
        <span>最大内存: {{pro_info.maxMem}}</span>
        <span>剩余内存: {{pro_info.freeMem}}</span>
        <span>已运行: {{pro_info.runTime}}</span>


      </el-header>
      <el-container>
        <el-aside width="200px">
          <el-col :span="12">
            <el-tree :data="og"
                     :props="defaultProps"
                     @node-click="handleNodeClick"
                     default-expand-all="true"
                     width="200px"
            ></el-tree>
          </el-col>
        </el-aside>
        <el-container>
          <el-main>
            <el-col :span="12">
              <h3>状态</h3>
              {{message}}

              <h3>数据</h3>

              <el-input
                  :rows="2"
                  placeholder=""
                  type="textarea"
                  v-model="node_info.data">
              </el-input>

              <span>节点类型: {{node_type}}</span>

              <br/>
              <br/>
              <br/>
              <el-button @click="del_node" type="danger">删除节点</el-button>
              <el-button @click="up_node" type="primary">修改</el-button>
              <div class="craete_node">

                <el-button @click="dialogVisible = true" type="primary">创建节点</el-button>
                <el-dialog
                    :before-close="handleClose"
                    :visible.sync="dialogVisible"
                    title="提示"
                    width="30%">
        <span>
         path:<el-input placeholder="请输入节点地址" v-model="create_node_param.path"></el-input>
        </span>
                  <span>

     data: <el-input placeholder="请输入数据" v-model="create_node_param.data"></el-input>
</span>
                  <span>
          type: <el-select placeholder="请选择" v-model="create_node_param.type">
        <el-option
            :key="item.value"
            :label="item.label"
            :value="item.value"
            v-for="item in options">
        </el-option>
      </el-select>
        </span>

                  <span class="dialog-footer" slot="footer">
          <el-button @click="dialogVisible = false">取 消</el-button>
          <el-button @click="create_node" type="primary">确 定</el-button>
        </span>
                </el-dialog>
              </div>
            </el-col>


          </el-main>


          <el-footer>
            <h3>zookeeper state </h3>
            <span>{{zk_state_res}}</span>
          </el-footer>
        </el-container>
      </el-container>
    </el-container>


    <el-table :data="data_list">
      <el-table-column :label="date" v-for="(date, key) in header">
        <template scope="scope">
          {{data_list[scope.$index][key]}}
        </template>
      </el-table-column>
    </el-table>
  </div>
</div>

</body>

<script>

  var app = new Vue({
    el: '#app',
    data: {
      pro_info: {
        "totalMem": "",
        "maxMem": "",
        "freeMem": "",
        "runTime": ""
      },
      options: [
        {
          value: 'PERSISTENT',
          label: 'PERSISTENT'
        }, {
          value: 'EPHEMERAL',
          label: 'EPHEMERAL'
        }
      ],
      now_node_pat: "",
      dialogVisible: false,
      radio: '1',
      message: "hello",
      node_type: "",
      og: [],
      defaultProps: {
        children: 'child',
        label: 'showName'
      },
      node_info: {},
      create_node_param: {
        path: "",
        type: "",
        data: ""
      },
      update_node_param: {
        "path": "",
        "data": ""
      },
      zk_state_res: "",
      header: ["column1", "column2", "column3"],
      data_list: [
        [1, 2, 3],
        [4, 5, 6]
      ],
    },
    methods: {
      handleNodeClick: function (data) {
        this.info(data.path);
      },
      info: function (path) {
        axios.get("/node/get/info", {params: {path: path}}).then(response => {
          this.node_info = response.data.data
          this.message = response.data.data.stat;
          this.node_type = response.data.data.type
          this.now_node_pat = path;
        }).catch(function (error) {
          console.log(error);
        });

      },
      tree: function () {
        axios.get('/node/tree').then(response => {
          this.og = [response.data.data];
        }).catch(function (error) {
          console.log(error);
        });

      },
      handleClose: function (done) {
        this.$confirm('确认关闭？')
        .then(_ => {
          done();
        })
        .catch(_ => {
        });
      },
      del_node: function () {
        if (!(this.now_node_pat == '')) {
          axios.get("node/del", {
            params: {
              path: this.now_node_pat
            }
          }).then(response => {
            this.tree();
          }).catch(function (error) {
            console.log(error);
          });
        }
      },
      up_node: function () {
        if (!(this.now_node_pat == '')) {
          this.update_node_param.data = this.node_info.data
          this.update_node_param.path = this.now_node_pat;

          axios.post("/node/update", this.update_node_param).then(response => {
            this.info(this.now_node_pat);
          }).catch(function (error) {
            console.log(error);
          });

        }
      },
      create_node: function () {
        this.dialogVisible = false;
        axios.post("/node/create", this.create_node_param).then(response => {
          this.tree();
        }).catch(function (err) {
          console.log(err);
        });
      },
      jvm: function () {
        axios.get("conf/jvm").then(response => {
          this.pro_info = response.data.data;
        })
      },
      zookeeper_state: function () {
        axios.post("/state/zk", {
          "port": 2181,
          "ip": "localhost"
        }).then(response => {
          this.zk_state_res = JSON.stringify(response.data.data) ;
        });
      },
      zk_mntr: function () {
        axios.post("/state/mntr").then(res => {
          var data = res.data.data;
          this.header = data.head;
          this.data_list = data.body;
        });

      }
    },
    created: function () {
      this.tree();
      this.jvm();
      this.zookeeper_state();
      this.zk_mntr();
      this.node_info = {
        state: {
          czxid: 2,
          mzxid: 0,
          ctime: 0,
          mtime: 0,
          version: 0,
          cversion: 0,
          aversion: 0,
          ephemeralOwner: 0,
          dataLength: 0,
          numChildren: 0,
          pzxid: 0
        },
        data: "数据",
        type: "临时节点"
      }

    }
  })


</script>
</html>